<template>
  <div class="article-containter">
    <div class="article-bg">
      <div class="black"></div>
    </div>
    <div class="article-main">
      <div class="title">
        <h4>{{ article.title }}</h4>
        <van-rate v-model="value" />
      </div>
      <hr>
        <p class="sub-tit">
        所需材料
      </p>
      <div class="dec">
        <p>
        <i>材料:</i>
        <span>
          {{ article.ingredients }}
        </span>
        </p>
        <p>
          <i>配料</i>
          <span>
            {{ article.burden }}
          </span>
        </p>

      </div>
          <p class="sub-tit">
        制作步骤
      </p>
      <div class="main-body">
        <div v-for="item in article.steps" :key="item.step">
          <p>{{item.step}}</p>
          <img :src="item.img" alt="">

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    Rate
  } from 'vant';
  export default {
    data() {
      return {
        id: this.$route.params.id,
        value: 3,
        article: {}
      }
    },
    created() {
      this.getArticle()
    },
    methods: {
      getArticle() {
        // this.$http.get('http://apis.juhe.cn/cook/queryid?id='+this.id+'&dtype=&key=f5d5fe2208d0e44115b617516af1ebe5').then(result=>{
        // })
        this.$http.get("json/cart/cartid.json").then(result => {
          if (result.body.resultcode == 200) {
            this.article = result.body.result.data[0];

          } else {
            Toast("数据加载失败");
          }
        });
      }
    }
  }

</script>
<style lang="scss" scoped>
</style>
